<template>
	<view>
		<fa-navbar title="课程"></fa-navbar>
		<view class="content">
			<view class="search">
				<u-search height="68" searchIconSize="44" :clearabled="true" bgColor="#ffffff" margin="34rpx 0" shape="round"  
				placeholder="请输入课程关键词" :showAction="false" v-model="keyword" @search="searchKeyword" @clear="searchKeyword"></u-search>
			</view>
			<view class="course">
				<view class="category">
					<u-tabs :list="majorList" lineHeight="8" lineWidth="40" keyName="name" :current="current" lineColor="#0052D9" 
					:activeStyle="{'fontWeight':'bold',transform: 'scale(1.05)','font-size':'32rpx','color':'#000000'}"
					:inactiveStyle="{'color':'#333333','font-size':'30rpx'}" 
					:itemStyle="{'padding-left':'0rpx','height':'88rpx'}" @click="clickCategory">
						<view slot="right" style="padding-left: 8rpx;" @tap="courseShow=true">
							<u-icon name="list" size="36" bold ></u-icon>
						</view>
					</u-tabs>
				</view>
				<view class="items">
					<view class="item" v-for="(item,index) in courseList" :key="index" @click="openDetail(item.id)">
						<view class="left">
							<u-image :src="item.image" width="260" height="195" radius="10"></u-image>
						</view>
						<view class="right">
							<view class="t-name">{{item.name}}</view>
							<text class="t-mn">{{item.major_name}}</text>
							<view class="t-fbsj">
								<text class="sj">{{item.publishtime_text}}</text>
								<text class="view">{{item.view}}人观看</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<view class="u-p-b-30" v-if="courseList.length">
			<u-loadmore bg-color="#f4f6f8" fontSize="28" :line="true" :status="has_more ? status : 'nomore'" />
		</view>
		<!-- 空数据 -->
		<view class="fa-empty" v-if="!courseList.length">
			<u-empty textSize="28" mode="data"></u-empty>
		</view>
		<!-- 课程分类 -->
		<u-popup :show="courseShow" mode="left" @close="closeCourse" :customStyle="{width:'660rpx'}">
			<view class="up-category">
				<view class="title">
					<text>课程分类</text>
				</view>
				<view class="major">
					<view class="item" v-for="(item,index) in collegeList" :key="index">
						<view class="xueyuan">
							<u-line class="u-line" margin="0 18rpx 0 0" :hairline="false" :color="theme.bgColor" direction="col"></u-line>
							<text>{{item.name}}</text>
						</view>
						<view class="zye">
							<block v-for="(item1,index1) in item.major" :key="index1">
								<text @click="clickCategory1(item1)" :class="item1.id==major_id?'major-active':''">{{item1.name}}</text>
							</block>
							
						</view>
					</view>
					
				</view>
				<view class="btn">
					<u-button text="取消" shape="circle" 
					:customStyle="{'background-color':'#AEB6C2','color':'#ffffff','width':'180rpx','height':'68rpx','line-height':'68rpx'}"
					@click="closeMajor"></u-button>
					<u-button text="确认" shape="circle"
					:customStyle="{'background-color':'#0052D9','color':'#ffffff','width':'360rpx','height':'68rpx','line-height':'68rpx','margin-left':'24rpx'}"
					@click="okMajor"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: lightColor }"></u-back-top>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
	import { archives } from '@/common/fa.mixin.js';
	export default {
		mixins: [archives],
		data() {
			return {
				keyword: '',
				actionText:'',
				courseShow:false,
				majorList:[],
				collegeList:[],
				courseList:[],
				page:1,
				has_more: true,
				major_id:0,
				courseList:[],
				current:0
			};
		},
		onLoad() {
			this.getCollegeList()
		},
		onShow() {
			this.getCourseList()
		},
		
		onReachBottom() {
			if (this.has_more) {
				this.page += 1;
				this.getCourseList();
			}
		},
		methods:{
			getCourseList(){
				this.$api.getCourseList({params:{
						page:this.page,
						keyword:this.keyword,
						major_id:this.major_id,
						},
					}).then((res)=>{
					if(res.code){
						if (this.page === 1) {
							this.courseList = [];
						}
						let courseList = res.data.data
						let pageList = res.data
						this.has_more = pageList.current_page < pageList.last_page;
						this.courseList = [...this.courseList, ...courseList];
					}
				})
			},
			searchKeyword(){
				this.page = 1;
				this.getCourseList()
			},
			openCategory(){
				this.courseShow = true
			},
			closeCourse(){
				this.courseShow = false
			},
			getCollegeList(){
				this.$api.getCollegeList({}).then((res)=>{
					if(res.code){
						this.collegeList = res.data.collegeList
						this.majorList = res.data.majorList
						
					}
				})
			},
			getMajorList(){
				this.$api.getCollegeList({}).then((res)=>{
					if(res.code){
						this.collegeList = res.data.collegeList
						console.log(this.majorList)
					}
				})
			},
			clickCategory(e){
				this.major_id = e.id
				this.current = e.index
				this.page=1
				this.getCourseList()
			},
			clickCategory1(e){
				this.major_id = e.id
				
			},
			closeMajor(){
				this.courseShow = false
				this.major_id = 0
				this.current = 0
				this.page = 1
				this.getCourseList()
			},
			okMajor(){
				let that = this
				that.page = 1
				this.majorList.map((item,index)=>{
					if(that.major_id == item.id){
						that.current = index
					}
				})
				this.courseShow = false
				this.getCourseList()
			},
			openDetail(courseId){
				uni.$u.route({
					url: '/pages/course/detail',
					params:{course_id: courseId},
				})
				return
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F3F5F8;
	}

	.content {
		background-color: #F3F5F8;
		padding: 188rpx 24rpx 280rpx;
	}
	.course{
		.category{
			margin-bottom: 32rpx;
		}
		.items{
			.item{
				display: flex;
				// align-items: center;
				background-color: #ffffff;
				border-radius: 10rpx;
				padding: 24rpx 18rpx;
				margin-bottom: 24rpx;
				.right{
					width: 100%;
					padding-left: 24rpx;
					.t-name{
						font-size: 30rpx;
						color: #333333;
						margin-bottom: 16rpx;
					}
					.t-mn{
						// display: block;
						background-color: #F1F2F5;
						border-radius: 10rpx;
						padding: 8rpx 12rpx;
						font-size: 24rpx;
						color: #999999;
						// margin: 16rpx 0rpx 28rpx 0rpx;
					}
					.t-fbsj{
						margin-top: 28rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.sj{
							font-size: 24rpx;
							color:#999999;
						}
						.view{
							font-size: 24rpx;
							color: #666666;
						}
					}
				}
			}
		}
	}
	.up-category{
		padding: 88rpx 48rpx 0 48rpx;
		.title{
			font-size: #000000;
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 24rpx;
		}
		.major{
			
			/deep/ .u-line {
				height: 28rpx !important;
				border-left-width: 6rpx !important;
				// color: #333333;
			}
			.item{
				.xueyuan{
					display: flex;
					align-items: center;
					margin-top: 24rpx;
				}
				.zye{
					display: flex;
					flex-wrap: wrap;
					text{
						background-color: #F3F5F8;
						padding: 16rpx 18rpx;
						font-size: 26rpx;
						color: #666666;
						margin-right: 24rpx;
						border-radius: 10rpx;
						margin-top: 24rpx;
					}
				}
			}
		}
		.btn{
			display: flex;
			position: absolute;
			bottom: 40rpx;
			left:24rpx;
			right: 24rpx;
		}
		.major-active{
			background-color: #E2EDFF !important;
			border: 1rpx solid #0052D9;
			color: #0052D9;
		}
	}
</style>